<template>
	<view>
		<!-- <sklelton v-if="loading"></sklelton> -->
		<view class="">
			<view class="top">
				<image class="bcg" src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/abcg.png" mode=""></image>
				<view class="navbar" :style="`top: ${top}px; width: calc(100% - ${rightIcon}px)`">
					<view class="navbar_l flex_jc_sb" @click="gochangecity">
						<uni-icons type="location-filled" size="24" color="#75613E"></uni-icons>
						<view class="text">{{ data.city }}</view>
						<image class="down" src="/static/down.png" mode=""></image>
					</view>
					<view class="navbar_r flex_jc_cent" @click="$pageGo('/pages/activity/searchActivity')">
						<image src="/static/search.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="content" :style="`height: calc(${data.height}px - 280rpx)`">
				<scroll-view :style="`height: calc(${data.height}px - 280rpx)`" class="left" scroll-y="true">
					<view class="left_item flex_jc_cent" :class="data.queryParams.type ? '' : 'select'" @click="changeSelect({ name: '全部' })">全部</view>
					<view
						class="left_item flex_jc_cent"
						:class="data.queryParams.type == item.name ? 'select' : ''"
						v-for="(item, index) in data.selectList"
						:key="index"
						@click="changeSelect(item)"
					>
						{{ item.name }}
					</view>
				</scroll-view>
				<view class="right">
					<view class="right_top">
						<uni-datetime-picker :lefticon="false" :border="false" v-model="data.range" type="daterange" rangeSeparator="至" @change="changeTime" />
						<uni-data-select :clear="false" mode="none" v-model="data.queryParams.lineType" :localdata="data.rangelist" @change="changeType"></uni-data-select>
					</view>
					<scroll-view
						:refresher-triggered="data.refresherTriggered"
						@refresherrefresh="onRefresherRefresh"
						:refresher-enabled="true"
						@scrolltolower="scrolltolower"
						:style="`height: calc(${data.height}px - 360rpx)`"
						class=""
						scroll-y="true"
					>
						<loadstatusVue :isactivity='true' :status="data.loadStatus">
							<view class="right_item" v-for="(item, index) in data.list" :key="index" @click="goinfo(item)">
								<view class="right_item_block">
									<view class="img">
										<image :src="item.imgFace" mode="aspectFill" :lazy-load="true"></image>
										<view class="adsimg" v-if="item.end == 0 && item.signUserList.length == item.maxCount">人员已满</view>
										<view class="adsimg" v-if="item.end == 1">活动结束</view>
									</view>
									<view class="right_cont">
										<view class="">
											<view class="title">{{ item.name }}</view>
											<view class="tip flex">
												<view class="t1">{{ item.type }}</view>
												<view class="t2" v-if="item.sign == '1'">签到</view>
												<view class="t2">{{ item.lineType == 1 ? '线上' : '线下' }}</view>
											</view>
										</view>
										<view class="">
											<view class="user flex">
												<image v-if="item.createUser.img" :src="item.createUser.img" mode="aspectFill"></image>
												<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode=""></image>
												<view class="">{{ item.createUser.name }}</view>
											</view>
											<view class="tips flex">
												<image src="/static/a1.png" mode=""></image>
												<view class="">{{ $formatDateTime(item.beginTime) }}</view>
											</view>
											<view class="tips flex" v-if="item.lineType == 1">
												<image src="/static/a3.png" mode=""></image>
												<view class="">{{item.platform}}</view>
											</view>
											<view class="tips flex" v-else>
												<image src="/static/a2.png" mode=""></image>
												<view class="ts">{{ item.addressInfo }}</view>
											</view>
										</view>
									</view>
								</view>
								<view class="bottom flex_jc_sb">
									<view class="text_flex" v-if="item.signUserList.length != 0">
										<view class="avatar-stack">
											<view v-for="(its, ind) in item.signUserList.slice(0, 3)" :key="ind" class="avatar-item" :style="{ left: `${ind * 20}rpx` }">
												<image v-if="its.img" :src="its.img" mode="aspectFill" class=""></image>
												<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
											</view>
										</view>
										<view class="tests">{{ item.signUserList.length }}/{{ item.maxCount }} 人报名</view>
									</view>
									<view class="" v-else></view>
									
									
									<view class="btn b1" v-if="item.end == 1">已结束</view>
									<view class="" v-else>
										<!-- <view class="btn" v-if="!item.activitySign">去报名</view> -->
										<view class="btn" v-if="!isOpen(item) && !item.activitySign">去报名</view>
										<view class="btn" v-if="item.activitySign && item.activitySign.supplement == '0'">已报名</view>
									</view>
								</view>
							</view>
						</loadstatusVue>
					</scroll-view>
				</view>
			</view>
		</view>
		<uv-tabbar :value="1" class="tab"></uv-tabbar>
	</view>
</template>

<script setup>
import { toast, showConfirm, tansParams } from '@/utils/common';
import { ref, getCurrentInstance, reactive, nextTick, computed } from 'vue';
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
import { getActivityAll, getPageActivityAll } from '@/api/activity.js';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import sklelton from '@/components/sklelton/activity.vue';
const top = uni.getStorageSync('topIcon');
const rightIcon = uni.getStorageSync('rightIcon');
const data = reactive({
	city: '西安市',
	refresherTriggered: false,
	range: [],
	selectList: [],
	rangelist: [
		{ value: '', text: '全部' },
		{ value: 1, text: '线上' },
		{ value: 2, text: '线下' }
	],
	list: [],
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	queryParams: {
		city: '西安市',
		type: '', // 活动类型
		lineType: '', // 1线上 2线下
		beginTimeBegin: '', // 开始日期 yyyy-MM-dd
		beginTimeEnd: '', // 结束日期 yyyy-MM-dd
		pageNum: 1,
		pageSize: 10
	},
	height: 0
});
const isTimeExceeded = (targetTime) => {
	// 处理目标时间
	let targetTimestamp;

	if (targetTime instanceof Date) {
		targetTimestamp = targetTime.getTime();
	} else if (typeof targetTime === 'string') {
		const iosSafeDateStr = targetTime.replace(' ', 'T');
		targetTimestamp = new Date(iosSafeDateStr).getTime();
	} else if (typeof targetTime === 'number') {
		targetTimestamp = targetTime;
	} else {
		return false;
	}

	if (isNaN(targetTimestamp)) {
		return false;
	}

	const now = Date.now();
	return now > targetTimestamp;
};
const isOpen = (item)=>{
	return isTimeExceeded(item.beginTime) 
}
const changeTime = (e) => {
	data.queryParams.beginTimeBegin = e[0]; // 重置页码
	data.queryParams.beginTimeEnd = e[1]; // 重置页码
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
const changeType = (e) => {
	data.queryParams.lineType = e; // 重置页码
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
const changeSelect = (item) => {
	data.queryParams.type = item.name; // 重置页码
	if (item.name == '全部') {
		data.queryParams.type = undefined; // 重置页码
	}
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
const onRefresherRefresh = () => {
	data.refresherTriggered = true;
	data.queryParams.pageNum = 1;
	getList();
	setTimeout(() => {
		data.refresherTriggered = false;
	}, 500);
};
// 跳转详情
const goinfo = (item) => {
	uni.navigateTo({
		url: `/pages/activity/info?id=${item.id}`
	});
};
// 切换城市
const gochangecity = () => {
	uni.navigateTo({
		url: '/mypage/changecity'
	});
};
onShow(() => {
	data.city = uni.getStorageSync('address').value;
	uni.$once('cityChange', function (e) {
		data.city = e.value;
		data.queryParams.city = e.value;
		getList();
	});
});
onLoad(() => {
	const systemInfo = uni.getSystemInfoSync();
	data.height = systemInfo.safeArea.bottom - 50;
	getType();
	getList();
});
// 类型列表
const getType = () => {
	getActivityAll({}).then((res) => {
		if (res.code == 200) {
			data.queryParams.type = undefined;
			data.selectList = res.data;
			getList();
		}
	});
};
const scrolltolower = () => {
	if (data.hasMore && (data.loadStatus === 'success' || data.loadStatus === 'noMore') && !data.isLoading) {
		data.queryParams.pageNum++;
		getList(true);
	}
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
		} else {
			data.list = res.rows || [];
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(500);
		}
		const res = await getPageActivityAll(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(500);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
</script>

<style lang="scss">
page {
	background: #fbfcf9;
	height: 100vh;
	overflow: hidden;
}
.top {
	height: 280rpx;
	.bcg {
		width: 100%;
		height: 280rpx;
		position: relative;
	}
	.navbar {
		position: fixed;
		// height: 88rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx 0rpx 15rpx;
		box-sizing: border-box;
		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #75613e;
		}
		.down {
			width: 24rpx;
			height: 18rpx;
			margin-left: 15rpx;
		}
		.navbar_r {
			width: 64rpx;
			height: 64rpx;
			background: rgba(0, 0, 0, 0.15);
			border-radius: 32rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}
.content {
	display: flex;
	width: 750rpx;
	.left {
		width: 160rpx;
		background: #f5f5f0;
		box-sizing: border-box;
		.left_item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			text-align: center;
			height: 100rpx;
			border-left: 2rpx solid #f5f5f0;
		}
		.select {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #75613e;
			border-left: 2rpx solid #75613e;
			background: linear-gradient(270deg, #f5f5f0 0%, #eee8d8 100%);
		}
	}

	.right {
		width: 590rpx;
		.right_top {
			display: flex;
			align-items: center;
			padding-left: 100rpx;
			height: 80rpx;
			width: 100%;
			box-sizing: border-box;
			.uni-stat-box {
				background: none;
			}
			.uni-stat__select {
				width: 150rpx;
				flex: none;
				.uni-select__input-text {
					color: #b19561;
					font-size: 24rpx;
				}
			}
			.uni-date {
				.uni-date-x {
					color: #b19561;
					background: none;
					font-size: 24rpx !important;
				}
				.uni-date__x-input {
					color: #b19561;
					font-size: 24rpx !important;
				}
			}
		}
		.right_item {
			width: 570rpx;
			height: 280rpx;
			background: #ffffff;
			margin: 0rpx auto 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			.right_item_block {
				display: flex;
				flex: 1;
				.img {
					display: block;
					width: 140rpx;
					height: 190rpx;
					border-radius: 8rpx;
					position: relative;
					image {
						width: 140rpx;
						height: 190rpx;
						border-radius: 8rpx;
					}
				}
				.adsimg {
					position: absolute;
					top: 0%;
					width: 140rpx;
					height: 190rpx;
					border-radius: 8rpx;
					background: rgba(0, 0, 0, 0.3);
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #ffffff;
					text-align: center;
					line-height: 190rpx;
				}
				.right_cont {
					flex: 1;
					margin-left: 12rpx;
					display: flex;
					flex-direction: column;
					box-sizing: border-box;
					justify-content: space-between;
					width: 0;
					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.tip {
						margin: 10rpx 0rpx 0rpx 0rpx;
						.t1 {
							padding: 0rpx 6rpx;
							height: 32rpx;
							background: #b19561;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #ffffff;
							line-height: 32rpx;
							margin-right: 10rpx;
						}
						.t2 {
							padding: 0rpx 6rpx;
							height: 28rpx;
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #615b56;
							line-height: 28rpx;
							border: 1px solid #615b56;
							margin-right: 10rpx;
						}
					}
					.user {
						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
							border-radius: 12rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #8f8f8b;
					}
					.tips {
						margin-top: 6rpx;
						image {
							width: 24rpx;
							height: 24rpx;
							margin-right: 10rpx;
							border-radius: 12rpx;
						}
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #8f8f8b;
						.ts {
							flex: 1;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.bottom {
				margin-top: 12rpx;
				.btn {
					width: 128rpx;
					height: 40rpx;
					background: #e3d0ad;
					border-radius: 40rpx 40rpx 40rpx 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #75613e;
					line-height: 40rpx;
					text-align: center;
				}
				.b1 {
					background: #f9f9f9;
					color: #d1cdcd;
				}
			}
			.text_flex {
				display: flex;
				align-items: center;
				.tests {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #8f8f8b;
					margin-left: 8rpx;
				}
			}
			.avatar-stack {
				width: 70rpx;
				position: relative;
				display: inline-block;
				padding-right: 12rpx; /* 预留右侧空间 */
				height: 40rpx; /* 头像高度 */
			}
			.avatar-item {
				position: absolute;
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%; /* 圆形头像 */
				transition: transform 0.2s;
				top: 5rpx;
				image {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%; /* 圆形头像 */
					border: 1px solid #fff;
				}
			}
		}
	}
}
</style>
